<template>
  <div class="icon-container" :class="customClass" :style="containerStyle">
    <img v-if="iconType === 'ico'" :src="iconPath" :alt="name" class="icon" />
    <div
      v-else-if="iconType === 'svg'"
      class="svg-icon"
      v-html="svgContent"
    ></div>
  </div>
</template>

<script setup>
import { ref, watch, onMounted, computed } from 'vue'

// 定义props
const props = defineProps({
  name: {
    type: String,
    required: true,
  },
  size: {
    type: [Number, String],
    default: 24,
  },
  customClass: {
    type: [String, Array, Object],
    default: '',
  },
  // 新增padding属性，用于控制图标内边距
  padding: {
    type: [Number, String],
    default: 0,
  },
})

// 响应式数据
const svgContent = ref('')
const iconType = ref('')
const iconPath = ref('')

// 计算容器样式
const containerStyle = computed(() => {
  return {
    width: `${props.size}px`,
    height: `${props.size}px`,
  }
})

// 加载图标方法
const loadIcon = async () => {
  try {
    console.log(props.name)

    // 检查是否为svg格式
    if (props.name.endsWith('.svg')) {
      iconType.value = 'svg'
      const iconName = props.name.endsWith('.svg')
        ? props.name
        : `${props.name}.svg`

      try {
        // 尝试从assets目录加载svg
        const svgModule = await import(`../../assets/${iconName}?raw`)
        svgContent.value = svgModule.default
      } catch (e) {
        // 尝试从pocketmonIcon目录加载svg
        try {
          const svgModule = await import(
            `../../assets/pocketmonIcon/${iconName}?raw`
          )
          svgContent.value = svgModule.default
        } catch (err) {
          console.error(`无法加载SVG图标: ${props.name}`, err)
          iconType.value = 'error'
        }
      }
    }
    // 检查是否为ico格式
    else if (props.name.endsWith('.ico')) {
      iconType.value = 'ico'

      try {
        // 尝试从assets目录加载ico
        iconPath.value = new URL(
          `../../assets/pocketmonIcon/${props.name}`,
          import.meta.url
        ).href
      } catch (e) {
        // 尝试从pocketmonIcon目录加载ico
        try {
          iconPath.value = new URL(
            `../../assets/pocketmonIcon/${props.name}`,
            import.meta.url
          ).href
        } catch (err) {
          console.error(`无法加载ICO图标: ${props.name}`, err)
          iconType.value = 'error'
        }
      }
    } else {
      console.error(`不支持的图标格式: ${props.name}`)
      iconType.value = 'error'
    }
  } catch (error) {
    console.error(`加载图标失败: ${props.name}`, error)
    iconType.value = 'error'
  }
}

// 监听name属性变化
watch(
  () => props.name,
  () => {
    loadIcon()
  },
  { immediate: true }
)

// 组件挂载时加载图标
onMounted(() => {
  loadIcon()
})
</script>

<style scoped>
.icon-container {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.icon {
  max-width: calc(100% - 2 * v-bind('`${props.padding}px`'));
  max-height: calc(100% - 2 * v-bind('`${props.padding}px`'));
  object-fit: contain;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.svg-icon {
  width: calc(100% - 2 * v-bind('`${props.padding}px`'));
  height: calc(100% - 2 * v-bind('`${props.padding}px`'));
  display: inline-flex;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.svg-icon :deep(svg) {
  width: 100%;
  height: 100%;
}

.icon-error {
  width: v-bind('`${props.size}px`');
  height: v-bind('`${props.size}px`');
  display: flex;
  align-items: center;
  justify-content: center;
  color: #f56c6c;
  font-size: 12px;
  border: 1px dashed #f56c6c;
  border-radius: 4px;
}
</style>
